<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>编辑食品安全排查项目</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <el-form label-width="110px" ref="editForm">
          <el-form-item label="上级类目：">
            <el-select v-model="form.parent_id" :disabled="disabledStatus" placeholder="选择上级类目" size="small">
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in selectList"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检查项目名称：">
            <el-input
                type="textarea"
                placeholder="检查项目名称"
                v-model="form.name"
                maxlength="500"
                size="small"
                rows="4"
                show-word-limit
            ></el-input>
          </el-form-item>
          <el-form-item label="序号：" v-if="form.parent_id">
            <el-input v-model="form.number" placeholder="序号" size="small"></el-input>
          </el-form-item>
          <el-form-item label="重点项：" v-if="form.parent_id">
            <el-radio-group v-model="form.is_keynote">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="合理缺项：" v-if="form.parent_id">
            <el-radio-group v-model="form.is_rational">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="责任人:" v-if="form.parent_id">
            <div class="user-list">
              <el-button type="primary" @click="getUserList()" size="small"><i class="el-icon-plus"></i>选择责任人
              </el-button>
              <el-button @click="clearLine" size="small"><i class="el-icon-delete"></i>清空列表
              </el-button>
            </div>
            <div>
              <el-tag
                  :key="tag.id"
                  v-for="(tag,index) in dynamicTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(index)"
                  class="mr-10"
              >{{ tag.realname }}
              </el-tag>
            </div>
          </el-form-item>

        </el-form>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click.native="closePOpup" size="small">取消</el-button>
        <el-button size="small" type="primary" @click="checkEditFn">确定保存</el-button>
      </div>
    </div>
    <MultipleTeacherModle :visible.sync="teacherVisible" @studentFn="studentFn"
                          :dynamicTagsArray="dynamicTagsArray"></MultipleTeacherModle>
  </div>
</template>

<script>
import {weekCheckOptionAdd, weekCheckOptionDetail, weekCheckOptionEdit} from "@/api/admin/food"

export default {
  props: ['visible', 'treeList', 'parentId', 'optionId', 'parentsAddType'],
  components: {},
  data() {
    return {
      dialogVisible: false,
      disabledStatus: false,
      form: {
        name: '',// 	字符串 	必填 	1 	- 	名称
        number: '',// 	字符串 	必填 	1 	- 	序号
        user_ids: '',// 	字符串 	必填 	1 	- 	负责用户id
        parent_id: 0,// 	字符串 	必填 	1 	- 	上级id
        is_keynote: 0,// 重点项目
        is_rational: 0,// 是否有合理缺陷
      },
      teacherVisible: false,
      dynamicTags: [],
      dynamicTagsArray: {},
      selectList: []
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        console.log('----->,', this.parentId, this.optionId, this.parentsAddType)
        if (this.parentsAddType === 'edit') {
          this.disabledStatus = true
          this.getDetailFn()
        }
        if (this.parentsAddType === 'add') {
          this.disabledStatus = true
          this.form.parent_id = this.parentId
        }
        let list_ = JSON.parse(JSON.stringify(this.treeList))
        list_.unshift({name: '顶级类目', id: 0})
        this.selectList = list_
      } else {
        this.form = {
          name: '',// 	字符串 	必填 	1 	- 	名称
          number: '',// 	字符串 	必填 	1 	- 	序号
          user_ids: '',// 	字符串 	必填 	1 	- 	负责用户id
          parent_id: 0,// 	字符串 	必填 	1 	- 	上级id
          is_keynote: 0,// 重点项目
          is_rational: 0,// 是否有合理缺陷
        }
        this.dynamicTags = []
        this.dynamicTagsArray = {}
        this.selectList = []
        this.disabledStatus = false
      }
    },
    // treeList() {
    //   let list_ = JSON.parse(JSON.stringify(this.treeList))
    //   list_.unshift({name: '顶级类目', id: 0})
    //   this.selectList = list_
    // }
  },
  created() {
  },
  methods: {
    getDetailFn() {
      weekCheckOptionDetail({id: this.optionId}).then(res => {
        console.log('res:', res)
        this.form.name = res.vo.name
        this.form.number = res.vo.number
        this.form.parent_id = res.vo.parent_id
        this.form.is_keynote = res.vo.is_keynote
        this.form.is_rational = res.vo.is_rational
        let a = {}
        for (let i in res.vo.user_ids) {
          a[res.vo.user_ids[i].id] = res.vo.user_ids[i]
        }
        this.studentFn(a)
      })
    },
    checkEditFn() {
      let data_ = JSON.parse(JSON.stringify(this.form))
      if (!data_.name) {
        this.$message.error('填写检查项目名称');
        return
      }
      if (data_.parent_id && !data_.number) {
        this.$message.error('填写序号');
        return
      }
      if (!this.form.name) {
        this.$message.error('填写检查项目名称');
        return
      }
      if (data_.parent_id && !this.dynamicTags.length) {
        this.$message.error('选择责任人')
        return
      }
      let list_id = []
      for (let item of this.dynamicTags) {
        list_id.push(item.id)
      }
      data_.user_ids = list_id.join(',')
      if (!this.optionId) {
        weekCheckOptionAdd(data_).then(res => {
          console.log('res:', res)
          this.$message.success(res.msg)
          this.$emit('InitFn')
          this.closePOpup()
        })
      } else {
        data_.id = this.optionId
        weekCheckOptionEdit(data_).then(res => {
          console.log('res:', res)
          this.$message.success(res.msg)
          this.$emit('InitFn')
          this.closePOpup()
        })
      }
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    studentFn(option) {
      console.log('option:', option)
      this.dynamicTags = []
      let list = [];
      for (let i in option) {
        list.push(option[i])
      }
      this.dynamicTags = JSON.parse(JSON.stringify(list))
    },
    handleClose(index) {
      this.dynamicTags.splice(index, 1)
    },
    getUserList() {
      let list = {};
      for (let item of this.dynamicTags) {
        list[item.id] = item
      }
      this.dynamicTagsArray = JSON.parse(JSON.stringify(list))
      this.teacherVisible = true
    },
    // 清空选择项
    clearLine() {
      this.dynamicTags = []
      this.dynamicTagsId = []
      this.dynamicTagsArray = {}
      this.optionForm.join_user = ''
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 500px;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.resruitment-title {
  padding: 5px 0;
  border-bottom: 2px solid #abd3f3;
  margin-bottom: 20px;
}

.el-radio {
  margin-right: 20px;
}

.jobTime {
  display: flex;
  align-items: center;
}

.jobTime span {
  padding: 0 10px;
}
</style>


